<template>
  <view class="stats-grid">
    <!-- 现场点位 -->
    <view class="stat-card">
      <view class="stat-icon">
        <text class="icon">📍</text>
      </view>
      <view class="stat-content">
        <text class="stat-number">{{ stats.siteCount }}</text>
        <text class="stat-label">视频点位</text>
      </view>
    </view>
    <!--行政区数-->
    <view class="stat-card" v-if="stats.districtCount">
      <view class="stat-icon">
        <text class="icon">🏙️</text>
      </view>
      <view class="stat-content">
        <text class="stat-number">{{ stats.districtCount }}</text>
        <text class="stat-label">行政区数</text>
      </view>
    </view>
    <!-- 布控人数 -->
    <view class="stat-card" v-if="stats.deployCount">
      <view class="stat-icon device-icon">
        <text class="icon">👥</text>
      </view>
      <view class="stat-content">
        <text class="stat-number">{{ stats.deployCount }}</text>
        <text class="stat-label">布控人数</text>
      </view>
    </view>
    <!--停车场位数-->
    <view class="stat-card" v-if="stats.parkingCount">
      <view class="stat-icon device-icon">
        <text class="icon">🚗</text>
      </view>
      <view class="stat-content">
        <text class="stat-number">{{ stats.parkingCount }}</text>
        <text class="stat-label">停车场位数</text>
      </view>
    </view>
    <!-- 设备监测数据 -->
    <view class="stat-card" v-if="stats.deviceCount">
      <view class="stat-icon device-icon">
        <text class="icon">📊</text>
      </view>
      <view class="stat-content">
        <text class="stat-number">{{ stats.deviceCount }}</text>
        <text class="stat-label">街道监测数</text>
      </view>
    </view>

    <!-- 算法识别率 -->
    <view
      class="stat-card"
      v-if="stats.filterRate"
      :class="{ large: !stats.streetCount }"
    >
      <view class="stat-icon filter-icon">
        <text class="icon">🔍</text>
      </view>
      <view class="stat-content">
        <text class="stat-number"
          >{{ stats.filterRate }}<text class="unit">%</text></text
        >
        <text class="stat-label">算法识别率</text>
      </view>
    </view>
    <!--监测街巷数-->
    <view class="stat-card" v-if="stats.streetCount">
      <view class="stat-icon">
        <text class="icon">🛣️</text>
      </view>
      <view class="stat-content">
        <text class="stat-number">{{ stats.streetCount }}</text>
        <text class="stat-label">监测街巷数</text>
      </view>
    </view>
  </view>
</template>
<script setup>
import { ref, computed } from "vue";
const props = defineProps({
  type: {
    type: String,
    required: true,
    default: "",
  },
});
// 统计数据
const stats = computed(() => {
  return monitorInfo[props.type] || {};
});
const monitorInfo = {
  //占道经营
  street_occupation: {
    siteCount: 77,
    deviceCount: 19,
    filterRate: 95,
  },
  //消防占道
  fire_road_block: {
    districtCount: 3,
    siteCount: 85,
    filterRate: 93,
    streetCount: 6,
  },
  //违章停车
  illegal_parking: {
    siteCount: 75,
    parkingCount: "--",
    filterRate: 89.97,
  },
  //人员密集
  crowd_density: {
    siteCount: 227,
    deviceCount: 10,
  },
  //内涝积水专题
  waterlogging: {
    siteCount: 7,
    deviceCount: 7,
    filterRate: "--",
  },
  //高空火灾
  high_altitude_fire: {
    siteCount: 9,
    deviceCount: "--",
    filterRate: "--",
  },
  //垃圾暴露
  garbage_exposure: {
    siteCount: 35,
    deviceCount: 15,
    filterRate: 95.1,
  },
  //垃圾桶满溢
  bin_overflow: {
    siteCount: 14,
    deviceCount: 7,
    filterRate: 89.28,
  },
  //流浪乞讨
  homeless: {
    siteCount: 339,
    deployCount: 78,
  },
  //出店经营
  storefront_business: {
    siteCount: 47,
    deviceCount: 15,
    filterRate: 85,
  },
};
</script>
<style lang="scss" scoped>
.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 20rpx;
  padding: 0 30rpx;
  margin-bottom: 20rpx;

  .stat-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid #2196f3;
    border-radius: 12rpx;
    padding: 30rpx;
    display: flex;
    align-items: center;
    backdrop-filter: blur(10px);

    &.large {
      grid-column: 1 / -1;
    }

    .stat-icon {
      margin-right: 20rpx;

      .icon {
        font-size: 40rpx;
      }

      &.device-icon .icon {
        color: #2196f3;
      }

      &.filter-icon .icon {
        color: #00ff88;
      }
    }

    .stat-content {
      flex: 1;

      .stat-number {
        display: block;
        font-size: 48rpx;
        font-weight: bold;
        color: #2196f3;
        line-height: 1;

        .unit {
          font-size: 32rpx;
          margin-left: 8rpx;
        }
      }

      .stat-label {
        display: block;
        font-size: 24rpx;
        color: #000;
        margin-top: 8rpx;
      }
    }
  }
}
</style>
